<template>
    <div class="success-status-container">
      <el-card shadow="never" class="success-status-card">
        <div class="status-header">
          <!-- 绿色的成功图标 -->
          <el-icon class="success-icon" :size="50"><circle-check /></el-icon>
          <h3>认定成功</h3>
        </div>
        <p class="success-message">恭喜！您的申请已经成功认定，继续保持优秀！</p>
  
        <!-- 显示认定结果和认定时间 -->
        <div class="recognition-details">
          <p class="recognition-result">
            <strong>认定结果：</strong>{{ recognitionResult }}
          </p>
          <p class="recognition-date">
            <strong>认定时间：</strong>{{ formattedRecognitionDate }}
          </p>
        </div>
        
        <!-- 动态背景 -->
        <div class="confetti-container" v-if="showConfetti">
          <div class="confetti"></div>
          <div class="confetti"></div>
          <div class="confetti"></div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { CircleCheck } from '@element-plus/icons-vue'; // 替换为正确的图标
  import { getCognizanceResult } from "@/api/competition/index.js"; 
  export default {
    props: {
    // 接收父组件传来的竞赛申请数据
    application: Object
  },
    components: {
      CircleCheck
    },
    data() {
      return {
        recognitionResult: "", // 认定结果
        recognitionDate: "",   // 认定时间
        showConfetti: false    // 控制庆祝动画显示
      };
    },
    async mounted() {
      // 从后端获取数据
      const data = await getCognizanceResult(this.application.id)
      const backendData = data.data
      const backendDataVO = {
        recognitionResult: backendData.finalRankName+backendData.finalRankLevel,
        recognitionDate: backendData.cognizanceTime, // ISO格式日期
      };
      //private String finalRankName;
      //private String finalRankLevel;
      //private String cognizanceTime;
  
      this.recognitionResult = backendDataVO.recognitionResult;
      this.recognitionDate = backendDataVO.recognitionDate;
  
      // 延迟显示庆祝效果
      setTimeout(() => {
        this.showConfetti = true;
      }, 500);
    },
    computed: {
      // 格式化认定时间（转为更友好的日期格式）
      formattedRecognitionDate() {
        const date = new Date(this.recognitionDate);
        return date.toLocaleDateString(); // 格式化日期为YYYY-MM-DD
      }
    }
  };
  </script>
  
  <style scoped>
  .success-status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  
  .success-status-card {
    width: 100%;
    max-width: 600px;
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .status-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
  
  h3 {
    color: #4caf50; /* 成功的绿色 */
    font-size: 24px;
    margin-left: 10px;
  }
  
  .success-message {
    color: #757575;
    font-size: 18px;
    margin-top: 10px;
  }
  
  .success-icon {
    color: #4caf50; /* 成功的绿色 */
  }
  
  .recognition-details {
    margin-top: 20px;
    text-align: left;
  }
  
  .recognition-result,
  .recognition-date {
    color: #4caf50; /* 与成功绿色匹配 */
    font-size: 16px;
    margin-top: 10px;
  }
  
  .confetti-container {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    animation: confetti 3s ease-in-out infinite;
  }
  
  .confetti {
    width: 10px;
    height: 10px;
    background-color: #ff4081;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: fall 1.5s ease-in-out infinite;
  }
  
  .confetti:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .confetti:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  /* 彩纸片下落动画 */
  @keyframes fall {
    0% {
      top: 0;
      transform: translateX(-50%) rotate(0deg);
    }
    100% {
      top: 100%;
      transform: translateX(-50%) rotate(360deg);
    }
  }
  
  /* 庆祝效果的背景动态变化 */
  @keyframes confetti {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  </style>
  